<template>
  <div>
    <h1 data-t="404">404</h1>
  </div>
</template>

<script>
export default {
  name: 'ErrorsIndex'
}
</script>

<style lang="less" scoped>
@keyframes shake {
  0%,
  100% {
    transform: translate(-1px);
  }

  10% {
    transform: translate(2px, 1px);
  }
  30% {
    transform: translate(-3px, 2px);
  }
  35% {
    transform: translate(2px, -3px);
    filter: blur(4px);
  }
  45% {
    transform: translate(2px, 2px) skewY(-8deg) scaleX(0.96);
    filter: blur(0);
  }
  50% {
    transform: translate(-3px, 1px);
  }
}
@keyframes scan {
  0%,
  20%,
  100% {
    height: 0;
    transform: translate(-50%, 0.44em);
  }

  10%,
  15% {
    height: 1em;
    line-height: 0.2em;
    transform: translate(-55%, 0.26em);
  }
}
@keyframes glitch-anim {
  0% {
    clip: rect(71px, 9999px, 40px, 0);
  }

  10% {
    clip: rect(12px, 9999px, 53px, 0);
  }
  20% {
    clip: rect(46px, 9999px, 81px, 0);
  }
  30% {
    clip: rect(70px, 9999px, 34px, 0);
  }
  40% {
    clip: rect(2px, 9999px, 77px, 0);
  }
  50% {
    clip: rect(53px, 9999px, 54px, 0);
  }
  60% {
    clip: rect(41px, 9999px, 100px, 0);
  }
  70% {
    clip: rect(78px, 9999px, 1px, 0);
  }
  80% {
    clip: rect(31px, 9999px, 97px, 0);
  }
  90% {
    clip: rect(53px, 9999px, 73px, 0);
  }
  100% {
    clip: rect(59px, 9999px, 98px, 0);
  }
}

h1 {
  text-align: center;
  width: 100%;
  font-size: 6rem;
  font-weight: 700;
  margin: 0;
  animation: shake 0.6s ease-in-out infinite alternate;
  user-select: none;
}
h1::before {
  content: attr(data-t);
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0.34em);
  height: 0.1em;
  line-height: 0.5em;
  width: 100%;
  animation: scan 0.5s ease-in-out 87ms infinite alternate,
    glitch-anim 0.3s ease-in-out infinite alternate;
  overflow: hidden;
  opacity: 0.7;
}
h1::after {
  content: attr(data-t);
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translate(-50%, 0.34em);
  height: 0.5em;
  line-height: 0.1em;
  width: 100%;
  animation: scan 665ms ease-in-out 0.45s infinite alternate,
    glitch-anim 0.3s ease-in-out infinite alternate;
  overflow: hidden;
  opacity: 0.8;
}
</style>
